<template>
  <zk-topBg
    showStash
    paddingTop="30"
    :showBack="true"
    title="核销管理"></zk-topBg>
  <view class="main">
    <view class="topBox">
      <zk-selectBox
        peaseSelect="核销状态"
        assemblyStyle="width:90px;"
        v-model:modelValue="lossStatus"
        value="value"
        label="text"
        :options="useVerifStore.verifStatusDict"></zk-selectBox>
      <zk-selectBox
        peaseSelect="核销类型"
        assemblyStyle="width:90px;"
        v-model:modelValue="lossType"
        value="value"
        label="text"
        :options="useVerifStore.verifTypeDict"></zk-selectBox>
      <view class="dataInput"><zk-date v-model:date="lossDate"></zk-date></view>
      <input
        type="text"
        class="textInput"
        v-model="searchParam"
        placeholder="物资名称/编号"
        placeholderStyle="font-size: 14px;color: #CCCCD3;" />
      <zk-btn iconType="search" iconSize="16px" @tap.stop="goQuery"
        >查询</zk-btn
      >
      <view style="width: 200px; height: 10px"></view>
      <!-- <zk-btn iconType="trash" iconSize="16px" :delBtn="true" iconColor="#000000"
        @tap.stop="dleLossAllData">批量删除</zk-btn>
      <zk-btn iconType="plusempty" iconSize="16px" @tap.stop="goLossContent('newAddition')">新增核销</zk-btn> -->
    </view>
    <view class="dataCard">
      <!-- <checkbox-group @change="checkboxAllChange"> -->
      <view class="cardTitle">
        <!-- <view class="titleText" style="width: 48px;">
            <checkbox style="transform:scale(0.59)" color="#32966F" value="selectAll" :checked="selectAll" />
          </view> -->
        <view
          class="titleText"
          v-for="(item, index) in useVerifStore.titleStatus"
          :key="index"
          :style="item.style"
          >{{ item.text }}
        </view>
        <view class="titleText" style="width: 92px">操作</view>
      </view>
      <!-- </checkbox-group> -->
      <!-- <checkbox-group @change="checkboxChange"> -->
      <scroll-view :scroll-y="true" class="cardList">
        <view
          class="listData"
          v-for="(list, indexNum) in useVerifStore.dataList"
          :key="indexNum">
          <!-- <view class="titleText" style="width: 48px;">
              <checkbox style="transform:scale(0.59)" color="#32966F" :value="list['Uuid']"
                :checked="selectList.includes(list['Uuid'])" />
            </view> -->
          <view
            class="titleText"
            v-for="(item, index) in useVerifStore.titleStatus"
            :key="index"
            :style="item.style">
            <text
              v-if="item.name === 'CheckStatusName'"
              :class="list['CheckStatus']"
              >{{ list[item.name] }}</text
            >
            <text
              v-else-if="item.name === 'CheckReplyStatusName'"
              :class="list['CheckReplyStatus'] || 'unsubmitted'"
              >{{ list[item.name] || "未提交" }}</text
            >
            <text v-else>{{ list[item.name] || "待编辑" }}</text>
          </view>
          <view class="titleText tailBtn">
            <text
              v-if="
                list['CheckStatus'] === 'DamageEdit' ||
                list['CheckReplyStatus'] === 'CheckFail'
              "
              @tap.stop="goLossContent('edit', list)"
              >编辑</text
            >
            <text v-else @tap.stop="goLossContent('details', list)">详情</text>
          </view>
        </view>
      </scroll-view>
      <!-- </checkbox-group> -->
    </view>
    <zk-pagination
      style="margin-top: 6px"
      :total="useVerifStore.total"
      :setPage="setPage"
      @event-change="setPageNum"></zk-pagination>
  </view>
</template>

<script setup lang="ts">
import { useVerifManageStore } from "@/stores/modules/verifMange";
import { useMemberStore } from "@/stores/modules/member";
import { onShow } from "@dcloudio/uni-app";
const useVerifStore = useVerifManageStore();
const useMember = useMemberStore();

onBeforeMount(() => {
  let lossData = {
    searchParam: searchParam.value,
    CheckDateBegin: lossDate[0],
    CheckDateEnd: lossDate[1],
    CheckReplyStatus: lossStatus.value,
    DamageReplyStatus: "CheckPass",
    GodownCode: useMember.GodownCode,
    CheckType: lossType.value,
    GodownKeeper: useMember.defaultStash.GodownKeeper,
  }; // 请求的参数
  useVerifStore.getDictData(
    { DictStatus: "Normal", DictType: "CheckStatus" },
    "verifStatusDict"
  ); // 核销状态字典查询
  useVerifStore.getDictData(
    { DictStatus: "Normal", DictType: "CheckType" },
    "verifTypeDict"
  ); // 核销类型字典查询
  useVerifStore.getVerifListData({ pageNum: 1, pageSize: 10, ...lossData });
});

let lossStatus = ref("");
let lossType = ref("");
let searchParam = ref(""); // 模糊搜索内容
let lossDate = reactive([]); // 核销时间,数组格式[开始时间，结束时间]

let setPage = reactive({
  state: true,
  num: 1,
}); // 传入分页器的页码

const goQuery = () => {
  setPage.state = !setPage.state;
  setPage.num = 1;
}; // 查询时出发事件重新请求数据

const setPageNum = (e: object) => {
  let lossData = {
    searchParam: searchParam.value,
    CheckDateBegin: lossDate[0],
    CheckDateEnd: lossDate[1],
    CheckReplyStatus: lossStatus.value,
    DamageReplyStatus: "CheckPass",
    GodownCode: useMember.GodownCode,
    CheckType: lossType.value,
    GodownKeeper: useMember.defaultStash.GodownKeeper,
  }; // 请求的参数
  useVerifStore.getVerifListData({ ...e, ...lossData });
}; // 请求数据

let selectAll = ref(false); // 全选按钮选中状态
let selectList = ref([]); // 单独选中列表内容
// const checkboxAllChange = (e: any) => {
//   if (e.detail.value.length === 1) {
//     selectAll.value = true
//     selectList.value = useVerifStore.dataList.map(e => { return e['Uuid'] })
//   } else {
//     selectAll.value = false
//     selectList.value = []
//   }
// }// 全选按钮触发时

// const checkboxChange = (e: any) => {
//   selectList.value = e.detail.value
//   if (selectList.value.length === useVerifStore.dataList.length) {
//     selectAll.value = true
//     return
//   }
//   selectAll.value = false
// }// 列表选中按钮触发时

// const dleLossData = (Uuid: string) => {
//   uni.showModal({
//     title: '重要提示',
//     content: '确定删除这1条数据吗,数据删除后不可恢复',
//     confirmText: '删除',
//     confirmColor: '#F73B4A',
//     success: function (res) {
//       if (res.confirm) {
//         console.log({ Uuid });

//         useVerifStore.deleteLossData({ Uuid })
//         setPage.state = !setPage.state
//       } else if (res.cancel) { return }
//     }
//   });
// }// 单独删除

// const dleLossAllData = () => {
//   uni.showModal({
//     title: '重要提示',
//     content: `确定删除这${selectList.value.length}条数据吗,数据删除后不可恢复`,
//     confirmText: '删除',
//     confirmColor: '#F73B4A',
//     success: async function (res) {
//       if (res.confirm) {
//         let data = {
//           Uuid: selectList.value.join(',')
//         }
//         await useVerifStore.deleteLossAllData(data)
//         setPage.state = !setPage.state
//       } else if (res.cancel) { return }
//     }
//   });
// }// 批量删除

const goLossContent = (status: string, data?: object) => {
  uni.navigateTo({
    url: `LRContent/LRContent?status=${status}`,
    success: function (res) {
      if (data) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit("channelData", data);
      }
    },
  });
};

onShow(() => {
  goQuery();
}); // 页面每次出现时都重新获取数据
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  z-index: 1;
  width: 870px;
  height: 506px;
  margin: 16px auto 0;
  align-items: center;
  padding: 20px 20px 6px;
  border-radius: 10px;
  background: rgb(255, 255, 255);

  .topBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 40px;

    .dataInput {
      width: 216px;
    }

    .textInput {
      width: 116px;
      height: 40px;
      box-sizing: border-box;
      border: 1px solid rgb(228, 228, 228);
      border-radius: 6px;
      line-height: 40px;
      font-size: 14px;
      padding: 0 12px;
    }
  }

  .dataCard {
    margin-top: 16px;
    width: 100%;

    .cardTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 40px;
      border-radius: 6px;
      padding: 0 12px;
      font-size: 14px;
      color: #adafb8;
      background-color: #f2f3f4;

      .titleText {
        text-align: center;
      }
    }

    .tailBtn {
      width: 92px;
      display: flex;
      justify-content: space-around;
      padding: 0 6px;
      color: #32966f;
    }

    .cardList {
      width: 100%;
      height: 340px;
      font-size: 14px;

      .listData {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 48px;
        padding: 0 12px;
        border-bottom: 1px solid rgb(244, 244, 244);

        .titleText {
          text-align: center;
        }
      }

      // 不同状态的样式
      .DamageEdit {
        color: #efa022;
      }

      .DamageSubmit {
        color: #32966f;
      }

      .CheckPass {
        color: #32966f;
      }

      .CheckNot {
        color: #efa022;
      }

      .CheckFail {
        color: #f73b4a;
      }

      .unsubmitted {
        color: #4875ff;
      }
    }
  }
}

::v-deep.uni-select__input-text {
  color: rgb(96, 98, 102);
}

::v-deep.uni-select {
  border: 1px solid rgb(228, 228, 228);
  border-radius: 2px;
}

::v-deep.zk_btn .text {
  margin: 0 2px !important;
}

::v-deep #selectBox .selectBox .icon {
  margin-left: 0;
}

::v-deep #selectBox .optionsList .option {
  text-align: center;
  padding: 0 0;
}

::v-deep .fs_16 {
  font-size: 14px;
}

::v-deep uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
  border-color: #d1d1d1;
}

// ::v-deep uni-checkbox:not([disabled]) .uni-checkbox-input{
//   border-color: #32966F;
// }
::v-deep.uni-input-placeholder {
  font-size: 14px;
}
</style>
